<template>
<div>
    
      <div class="title">
          <div class="left">
              <span class="iconfont icon-bofang"></span>
              <span>{{list.length}}</span>
          </div>
          <span class="iconfont icon-total_selection"></span>
      </div>
  <div class="musiclist" @click="$store.commit('changeplaylist',list)">

            <music class="music" v-for="item in list" :id='item.id'></music>

      </div>
</div>

  
</template>

<script>
import music from '@/components/Small/music.vue'
export default {
    components:{
        music
    },
    props:['list']

}
</script>

<style lang="scss" scoped>
$color: #fff;
$banxin: 690rem;
$theme: #f8e24a;
// 歌曲列表
.title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 690rem;
    margin-top: 90rem;
    
    .left{
        display: flex;
        justify-content: center;
        align-items: center;
        
        span{
            &:first-child{
                padding: 20rem 50rem;
                background-color: $theme;
                color: #020005;
                border-radius: 70rem;
                font-size: 30rem;
            }
            &:last-child{
                margin-left: 35rem;
                color: #838383;

                border-radius: 70rem;
                font-size: 30rem;

            }
        }
    }
  
       span{
           text-align: center;
           font-size: 50rem;
           color: #838383;
       }
    
}
// 列表
.musiclist{
    margin-top: 45rem;
    .music{
        margin-top: 20rem;
    }
}
</style>